<template>
  <div class="profile-container">
    <!-- 个人信息展示 -->
    <div class="profile-header">
      <el-avatar :size="100" :src="userInfo.avatar" />
      <div class="profile-info">
        <h1>{{ userInfo.username }}</h1>
        <p>{{ userInfo.email }}</p>
        <p>注册时间：{{ userInfo.registerTime }}</p>
      </div>
    </div>

    <!-- 功能导航 -->
    <el-tabs v-model="activeTab" class="profile-tabs">
      <el-tab-pane label="个人信息" name="info">
        <el-form label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" disabled />
          </el-form-item>
          <el-form-item label="电子邮箱">
            <el-input v-model="userInfo.email" />
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="userInfo.phone" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">保存修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="password">
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
          <el-form-item label="当前密码" prop="currentPassword">
            <el-input v-model="passwordForm.currentPassword" type="password" show-password />
          </el-form-item>

          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" show-password />
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleChangePassword">
              修改密码
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
import { getInfo } from '@/api/profile';


onMounted(() => {
  getUserInfo();
})
// 根据用户ID获取用户信息
function getUserInfo() {
  const userId = JSON.parse(localStorage.getItem("userInfo")).userId
  getInfo(userId).then(result => {

    userInfo.avatar = result.data.avatarUrl || userInfo.avatar;
    userInfo.username = result.data.username || userInfo.username;
    // userInfo.email = result.data.email || userInfo.email;
    // userInfo.phone = result.data.phone || userInfo.phone;
    // userInfo.registerTime = result.data.registerTime || userInfo.registerTime;
  })
}

// 用户信息
const userInfo = reactive({
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  username: '用户昵称',
  email: 'user@example.com',
  phone: '138-1234-5678',
  registerTime: '2025-01-01'
})

// 密码修改相关
const activeTab = ref('info')

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度不能少于6位'))
  } else {
    if (passwordForm.confirmPassword !== '') {
      passwordFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validateConfirm = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { validator: validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validateConfirm, trigger: 'blur' }
  ]
}

const passwordFormRef = ref()

const handleChangePassword = () => {
  passwordFormRef.value.validate(valid => {
    if (valid) {
      // 这里调用修改密码的API
      ElMessage.success('密码修改成功')
      // 清空表单
      passwordForm.currentPassword = ''
      passwordForm.newPassword = ''
      passwordForm.confirmPassword = ''
    } else {
      ElMessage.error('请正确填写表单')
      return false
    }
  })
}
</script>

<style scoped>
.profile-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.profile-info {
  margin-left: 30px;
}

.profile-info h1 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.profile-info p {
  margin: 5px 0;
  color: #666;
}

.profile-tabs {
  margin-top: 20px;
}

.el-form {
  max-width: 500px;
  margin: 20px auto;
}
</style>